<template>
    <div class="box">
      <header class="header">
        <van-search
          v-model="value"
          shape="round"
          label="JD"
          show-action
          background="#f66"
          placeholder="请输入搜索关键词"
          @focus="$router.push('/search')"
        >
          <template #left>
            <van-icon name="wap-nav" @click="$router.push('/kind')"/>
          </template>
          <!-- <template #left-icon>
            <van-image src=""/>
          </template> -->
          <template #action>
            <div v-if="loginState" @click="logout">退出</div>
            <div v-else @click="$router.push('/login')">登录</div>
          </template>
        </van-search>
      </header>
      <div class="content" id="content" ref="content">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
          <Banner :bannerlist="bannerlist" />
          <Nav />
          <Ad />
          <van-list v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false">
            <Prolist :prolist="prolist"/>
          </van-list>
        </van-pull-refresh>
        <div class="backup" @click="backtop" v-if="flag">
          <van-icon name="back-top" size="32" color="#ccc"/>
        </div>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Grid, GridItem, Image as VanImage, List, PullRefresh, Icon, Search, Toast } from 'vant'
import Prolist from './components/Prolist'
import Banner from './components/Banner'
import Nav from './components/Nav'
import Ad from './components/Ad'
import { getBannerlist, getProlist } from '@/api'
import { mapMutations, mapState } from 'vuex'
import { removeStorage } from '@/utils/storage'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
Vue.use(Search)
export default {
  data () {
    return {
      bannerlist: [],
      prolist: [],
      loading: false, // 上拉加载是否在加载,
      finished: false, // 数据是否请求完成,true表示没有数据了
      isLoading: false, // 页面是否在刷新过程中
      count: 2,
      flag: false, // 回到顶部默认不显示
      value: ''
    }
  },
  computed: {
    ...mapState({
      loginState: ({ user: { loginState } }) => loginState
    })
  },
  methods: {
    ...mapMutations({
      removeLoginState: 'user/change_login_state',
      removeUserid: 'user/change_userid',
      removeToken: 'user/change_token',
      emptyCart: 'cart/change_cart_list'
    }),
    logout () {
      removeStorage('loginState')
      removeStorage('userid')
      removeStorage('token')
      this.removeLoginState(false)
      this.removeUserid('')
      this.removeToken('')
      this.emptyCart([])
      Toast('退出登录成功')
    },
    scrollFn () {
      // if (document.getElementById('content').scrollTop > 400) {
      localStorage.setItem('top', this.$refs.content.scrollTop) // 滚动时记录滚动条的位置
      if (this.$refs.content.scrollTop > 400) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    backtop () {
      // document.getElementById('content').scrollTop = 0
      // console.log(document.getElementById('content') === this.$refs.content)
      this.$refs.content.scrollTop = 0
    },
    onRefresh () {
      this.isLoading = true
      getProlist().then(res => {
        this.prolist = res.data.data // 默认首页的数据
        this.count = 2 // 默认下拉刷新就是第一页的数据,下次上拉加载的是第二页的数据
        this.finished = false // 表示继续可以上拉
        this.isLoading = false // 下拉刷新结束
      })
    },
    onLoad () {
      this.loading = true
      getProlist({
        limitnum: 10,
        count: this.count
      }).then(res => {
        if (res.data.data.length === 0) {
          this.finished = true
        } else {
          this.prolist = [...this.prolist, ...res.data.data]
        }
        this.loading = false
        this.count++
      })
    }
  },
  activated () {
    this.$refs.content.scrollTop = localStorage.getItem('top')
  },
  created () {
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
    })
    getProlist().then(res => {
      this.prolist = res.data.data
      // document.getElementById('content').addEventListener('scroll', this.scrollFn)
      this.$refs.content.addEventListener('scroll', this.scrollFn)
    })
  },
  components: {
    Prolist,
    Banner,
    Nav,
    Ad
  }
}
</script>

<style lang="scss" scoped>
.backup{
  position: fixed;
  bottom: 0.51rem;
  right: 0.1rem;
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}
.van-search {
  height: 0.44rem;
  background-color: #ee0a24;
  .van-search__label {
    padding: 0 5px;
    color: #ee0a24;
    font-size: 14px;
    line-height: 34px;
  }
  .van-cell{
    padding: 2px 0;
    line-height: 30px;
  }
  .van-icon {
    font-size: 28px;
    color: #fff;
    margin-right: 10px;
  }
  .van-search__action{
    color: #fff;
    font-size: 16px;
  }
}
</style>
